<template>
  <div class="all">
    <div class="order_content">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="list" label="商品图片" width="180">
          <template slot-scope="scope">
            <el-image v-for="(item, index) in scope.row.list" :key="index" style="width: 100px; height: 100px"
              :src="item.detailImage"></el-image>

          </template>
        </el-table-column>
        <el-table-column prop="list" label="商品名称">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.list" :key="index">
              {{ item.detailName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="价格"> </el-table-column>
        <el-table-column prop="orderStatus" label="状态">
          <template slot-scope="scope">
            <div v-if="String(scope.row.orderStatus) === '1'">待付款</div>
            <div v-if="String(scope.row.orderStatus) === '2'">待收货</div>
            <div v-if="String(scope.row.orderStatus) === '3'">待收货</div>
            <div v-if="String(scope.row.orderStatus) === '4'">待收货</div>
            <div v-if="String(scope.row.orderStatus) === '5'">待评价</div>
            <!-- {{ String(scope.row.orderStatus) === '1' ? '待付款' : '已付款' }} -->
          </template>
        </el-table-column>
        
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
          <el-button type="warning">{{ String(scope.row.orderStatus) === '1' ? '付款' : '' }}</el-button>
          <el-button type="danger">{{ String(scope.row.orderStatus) === '1' ? '取消' : '' }}</el-button>
        </template>
        </el-table-column>
      
      </el-table>
    </div>
  </div>
</template>

<script>
import { getOrderList } from '@/api/Order'
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tableData: [
      ],
    };

  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    init() {
      console.log(this.userId);
      getOrderList(this.userId).then(res => {
        
        this.tableData = res.data
      })
    },
    test(n) {
      

    }
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="scss">
.all {
  .order_content {
    .el-table .cell {
      font-size: 20px;
      text-align: center;
    }

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
    }

    .el-checkbox__inner::after {
      border: 3px solid #fff;
      border-left: 0;
      border-top: 0;
      left: 6px;
      top: 3px;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #e6a23c;
      border: 1px solid #e6a23c;
    }

    .el-table .cell {
      font-size: 20px;
      text-align: center;
    }

    .el-table span {
      display: block;
      // margin-bottom: 20px;
    }
  }
}
</style>



